<template>
  <div class="hospital-introduction">
    <nav-top title="医院介绍" :goback="true"></nav-top>
    <img class="top-img" src="/static/img/hospital/introduction-top.png" />
    <div class="hospital-list">
      <div class="hospital" v-for="(item,index) in hospitals" :key="index">
        <img :src="item.img" />
        <p class="hospital-name" v-html="item.name" />
        <p class="hospital-detail" v-html="item.detail" />
      </div>
    </div>
    <contact-footer v-show="false"></contact-footer>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import ContactFooter from "@/components/footer/contactFooter";

export default {
  components: {
    NavTop,
    ContactFooter
  },
  name: "HospitalIntroduction",
  data() {
    return {
      hospitals: [
        {
          img: "/static/img/hospital/hospital.png",
          name: "医院名称",
          detail:
            "医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍。"
        },
        {
          img: "/static/img/hospital/hospital.png",
          name: "医院名称",
          detail:
            "医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍。"
        },
        {
          img: "/static/img/hospital/hospital.png",
          name: "医院名称",
          detail:
            "医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍。"
        },
        {
          img: "/static/img/hospital/hospital.png",
          name: "医院名称医院名称医院名称医院名称医院名称医院名称医院名称",
          detail:
            "医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍。"
        },
        {
          img: "/static/img/hospital/hospital.png",
          name: "医院名称",
          detail:
            "医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍医院介绍。"
        }
      ]
    };
  }
};
</script>
<style lang='scss' scoped>
.hospital-introduction {
  margin-top: 46px;
  .top-img {
    width: 320px;
    height: 89px;
  }
  .hospital-list {
    .hospital {
      margin-bottom: 12px;
      padding-left: 10px;
      img {
        margin-top: 7px;
        width: 299px;
        height: 169px;
      }
      p {
        margin: 0;
      }
      .hospital-name {
        width: 296px;
        margin-top: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 15px;
        color: #010101;
      }
      .hospital-detail {
        margin-top: 11px 0 0 0;
        padding-bottom: 14px;
        width: 296px;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #666666;
        line-height: 18px;
        border-bottom: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
